<template>
  <div class="userheader">
    <userHeaderNav>我的头像</userHeaderNav>
    <div class="tx">
      <div class="wline">
        <img class="header_pand" v-if="user.pand_url" :src="user.pand_url" alt />
        <p>
          <span>更换头像</span>
          <input style="opacity: 0;" type="file" @change="handleImg" />
        </p>

        <img :src="user.headerimg?user.headerimg:`${$store.state.defaulheaderturl}user/user.jpg`" alt="头像" />
      </div>
    </div>
    <div class="pand">
      <h3>可替换挂件({{total}})</h3>
      <div class="pandc">
        <div @click="open(item.pand_url)" class="item" v-for="item in pands" :key="item._id">
          <img class="img1" :src="item.pand_url" alt />
          <img class="img2" :src="user.headerimg?user.headerimg:`${$store.state.defaulheaderturl}user/user.jpg`" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userHeaderNav from "@/components/user/usernav.vue";
export default {
  data() {
    return {
      user: {},
      total: 0,
      pands: [],
    };
  },
  created() {
    let userdata = window.sessionStorage.getItem("user");
    this.user = JSON.parse(userdata);

    this.getUserPands();
  },
  components: {
    userHeaderNav,
  },
  methods: {
    //打开头像改变提示框
    open(e) {
      this.$confirm("确定要更改头像挂件吗？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "放弃",
      })
        .then(async () => {
          let data = await this.$http.post("userCenter/setpand", {
            pand_url: e,
            _id: this.user._id,
          });
          // console.log(data.data)
          if (data.status == 200) {
            this.user.pand_url = e;
            window.sessionStorage.setItem("user", JSON.stringify(this.user));
            this.$message.success(data.data.message);
          }
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "" : "",
          });
        });
    },

    //获取全部头像挂件
    async getUserPands() {
      let data = await this.$http.get("userCenter/pands");
      // console.log(data);
      if (data.status == 200) {
        this.pands = data.data.data;
        this.total=data.data.total
      } else {
        this.$message.error("获取全部头像挂件失败，刷新重新获取");
      }
    },
    //上传头像
    async handleImg(e) {
      var file = e.target.files[0];
      var param = new FormData();
      param.append("file", file, file.name);
      var config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        params: {
          _id: this.user._id,
        },
      };

      let data = await this.$http.post("userCenter/uploadimage", param, config);
      // console.log(data.data)
      if (data.status == 200) {
        this.user = data.data.data1;
        this.$message.success("头像更换成功");
        window.sessionStorage.setItem("user", JSON.stringify(this.user));
      } else {
        this.$message.error("头像更换失败，请重试");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tx {
  height: 230px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
  .wline {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid #ddd;
    position: relative;
    text-align: center;
    .header_pand {
      width: 170px;
      height: 170px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 99;
    }

    p {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background-color: #00a1d6;
      color: #fff;
      text-align: center;
      font-size: 14px;
      cursor: pointer;

      input {
        display: block;
        width: 100%;
        height: 100%;
      }
      span {
        padding: 8px;
        width: 54px;
        height: 54px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    img {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.userheader {
  min-height: 500px;
}

.pand {
  padding-bottom: 30px;
  h3 {
    height: 40px;
    line-height: 70px;
    padding-left: 24px;
    font-size: 14px;
  }

  .pandc {
    padding-left: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    .item {
      margin-top: 30px;
      margin-right: 47px;
      width: 165px;
      height: 165px;
      border: 1px solid #ccc;
      border-radius: 3px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &:nth-of-type(4n) {
        margin-right: 24px;
      }
      &:hover {
        border: 1px solid #00a1d7;
      }
      .img1 {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .img2 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
  }
}
</style>